<template>
  <el-dialog 
    :model-value="visible" 
    @update:model-value="(value) => emit('update:visible', value)"
    title="工单回单" 
    width="90%"
    :before-close="handleClose"
  >
    <el-form :model="form" label-width="100px">
      <el-form-item label="完成描述" required>
        <el-input 
          v-model="form.description"
          type="textarea"
          :rows="4"
          placeholder="请描述完成情况..."
        />
      </el-form-item>
      
      <el-form-item label="障碍原因">
        <el-select 
          v-model="form.fault_category"
          placeholder="请选择障碍原因分类"
          style="width: 100%"
        >
          <el-option label="设备故障" value="equipment_failure" />
          <el-option label="电路问题" value="circuit_issue" />
          <el-option label="软件故障" value="software_issue" />
          <el-option label="人为损坏" value="human_damage" />
          <el-option label="自然损耗" value="natural_wear" />
          <el-option label="其他" value="other" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="使用材料">
        <div class="material-list">
          <div 
            v-for="(material, index) in form.materials" 
            :key="index"
            class="material-item"
          >
            <el-select 
              v-model="material.material_id"
              placeholder="选择材料"
              style="width: 40%"
              @change="handleMaterialChange(material)"
            >
              <el-option 
                v-for="mat in availableMaterials"
                :key="mat.id"
                :label="mat.name"
                :value="mat.id"
              />
            </el-select>
            <el-input-number 
              v-model="material.quantity"
              :min="0.1"
              :step="0.1"
              placeholder="数量"
              style="width: 30%"
            />
            <span style="width: 20%; text-align: center">{{ material.unit || '' }}</span>
            <el-button 
              type="danger" 
              size="small" 
              @click="removeMaterial(index)"
              :icon="Delete"
            />
          </div>
          <el-button 
            type="primary" 
            size="small" 
            @click="addMaterial"
            :icon="Plus"
          >
            添加材料
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">完成回单</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Plus, Delete } from '@element-plus/icons-vue'

interface Material {
  id: number
  name: string
  unit: string
}

interface MaterialUsage {
  material_id: number | null
  quantity: number
  unit: string
}

interface CompleteForm {
  work_order_id: number | null
  description: string
  fault_category: string
  materials: MaterialUsage[]
}

interface Props {
  visible: boolean
  workOrderId?: number | null
  availableMaterials: Material[]
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:visible': [value: boolean]
  submit: [form: CompleteForm]
}>()

const form = ref<CompleteForm>({
  work_order_id: null,
  description: '',
  fault_category: '',
  materials: []
})

// 监听工单ID变化，重置表单
watch(() => props.workOrderId, (newId) => {
  if (newId) {
    form.value = {
      work_order_id: newId,
      description: '',
      fault_category: '',
      materials: []
    }
  }
})

const addMaterial = () => {
  form.value.materials.push({
    material_id: null,
    quantity: 1,
    unit: ''
  })
}

const removeMaterial = (index: number) => {
  form.value.materials.splice(index, 1)
}

const handleMaterialChange = (material: MaterialUsage) => {
  if (!props.availableMaterials || !Array.isArray(props.availableMaterials)) {
    return
  }
  const mat = props.availableMaterials.find(m => m.id === material.material_id)
  if (mat) {
    material.unit = mat.unit
  }
}

const handleClose = () => {
  emit('update:visible', false)
  // 重置表单
  form.value = {
    work_order_id: null,
    description: '',
    fault_category: '',
    materials: []
  }
}

const handleSubmit = () => {
  emit('submit', { ...form.value })
}
</script>

<style scoped>
.material-list {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 12px;
}

.material-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.material-item:last-child {
  margin-bottom: 0;
}
</style>